<template>
    <div class='login-box'>
      <h3>欢迎来到飞翔</h3>
      <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="用户名" prefix-icon="el-icon-mobile-phone"></el-input>
        </el-form-item>
        <el-form-item prop="pwd" :show-message='false'>
          <el-input v-model="loginForm.pwd" placeholder="密码" type='password' prefix-icon="el-icon-unlock"
          @keyup.enter.native="loginFun('loginForm')"></el-input>
        </el-form-item>
      </el-form>
      <div class="login-tip" v-if="tip==0">
          <span>密码登录</span>
          <span>自动登录</span>
      </div>
      <el-alert
        show-icon
        title="登陆成功"
        type="success" :closable='false'
        class='alert' v-if="tip==1">
      </el-alert>
      <el-alert
        show-icon
        title="输入错误,请重新输入"
        type="error" :closable='false'
        class='alert' v-if="tip==2">
      </el-alert>
      <el-button type="primary" @click="loginFun('loginForm')">登录</el-button>
      <div class="login-tip right">
        <router-link to="/register" class='login-tip-a'>没有账号？免费注册></router-link>
      </div>
    </div>
</template>

<script>
import {setToken} from '../utils/cookieUtils.js'
import {login} from '../api/login.js'
import vuex from '../store'
export default {
  data() {
      return {
        tip:0, // 0 显示密码登录和自动登录,1 显示登陆成功信息,2 显示错误信息
        timer:'',//计时器
        loginForm: {
          username: '',
          pwd: '',
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      loginFun(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let {username,pwd}=this.loginForm
            login({username,pwd}).then(res=>{
              if(res.code==200){
                setToken('token',res.data.token)
                this.tip=1
                vuex.state.username=username
                this.timer=setInterval(() => {
                  this.$router.push('home')
                }, 500);
              }else{
                this.tip=2
                this.loginForm.pwd=''
              }
            })
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
}
</script>
<style lang='less'>
  .alert{
    margin-left: 100px !important;
    width: 270px !important;
    margin-bottom: 10px !important;
    font-weight: bold;
  }
  .login-box
    {
      flex: 1;
      text-align: center;
      h3{
        display: inline-block;
        margin: 58px 0 66px;
        margin-left: 100px;
        font-size: 30px;
        font-weight: bold;
        color: #3d8ffd;
        font-family: '微软雅黑'
      }
      .el-input,.el-button,.login-tip{
        width:270px;
      }
      .el-button,.login-tip{
        margin-left: 100px;
      }
      .login-tip{
        display: flex;
        justify-content: space-between;
        span{
          margin: 0 0 20px 0;
          font-size: 16px;
          color: #519bfe;
          font-family: 'Regular';
          cursor: pointer;
        }
      }
      .right{
        justify-content: flex-end;
        margin-top: 73px;
      }
      .el-button{
        font-weight: bold;
        font-size: 16px;
        font-family: '微软雅黑';
        background: #3d8ffd;
      }
      .login-tip-a{
        color: #3d8ffd;
      }
      .el-input{
        color: #a2a3a3;
      }
    } 
</style>